<template>
  <base-table
    :url="url"
    :table-field-list="tableFieldList"
    :submit-form="submitForm"
    submit-form-title="检测项目维护"
    @data-format="dataFormat"
    @set-form-init-value="setFormInitValue"
    @submit-valid="submitValid"
    @clear-table-validate="clearTableValidate"
    @json-format="jsonFormat"
  >
    <template #submitForm>
      <el-form
        :model="submitForm"
        :rules="formRules"
        :label-width="100"
        ref="submitFormRef"
      >
        <el-form-item label="项目编号：" prop="no">
          <el-input v-model="submitForm.no"></el-input>
        </el-form-item>
        <el-form-item label="项目名称：" prop="name">
          <el-input v-model="submitForm.name"></el-input>
        </el-form-item>
        <el-form-item label="检测项目描述：" prop="represent">
          <el-input v-model="submitForm.represent"></el-input>
        </el-form-item>
        <el-form-item label="检测项目内容：" prop="content">
          <el-input v-model="submitForm.content"></el-input>
        </el-form-item>
        <el-form-item label="备注：" prop="remark">
          <el-input v-model="submitForm.remark"></el-input>
        </el-form-item>
      </el-form>
    </template>
  </base-table>
</template>

<script lang="ts" setup>
import BaseTable from "@/components/table/basic/BaseTable.vue";
import { TableField, TableUrl } from "@/models/TableSetting";
import { ref } from "vue";
import { QualityTestItems } from "@/models/quality/QualityTestItems";

const url = {
  refreshUrl: "/basic-request/QualityTestItems",
  modifyingSingleUrl: "/basic-request/QualityTestItems",
  modifyingBatchUrl: "/basic-request/QualityTestItems/batch",
  deleteUrl: "/basic-request/QualityTestItems/batchDelete",
} as TableUrl;

const tableFieldList = [
  {
    filedName: "no",
    label: "项目编号",
    width: 220,
  },
  {
    filedName: "name",
    label: "项目名称",
    width: 220,
  },
  {
    filedName: "represent",
    label: "描述",
    width: 220,
  },
  {
    filedName: "content",
    label: "内容",
    width: 340,
  },
  {
    filedName: "remark",
    label: "备注",
    width: 220,
  },
  {
    filedName: "createUser",
    label: "创建人",
    width: 220,
  },
  {
    filedName: "createGmt",
    label: "创建时间",
    width: 220,
  },
  {
    filedName: "modifiedUser",
    label: "修改人",
    width: 220,
  },
  {
    filedName: "modifiedGmt",
    label: "修改时间",
    minWidth: 220,
  },
] as Array<TableField>;

// 校验规则
const formRules = {
  no: [
    {
      required: true,
      message: "项目编号不能为空",
      trigger: "blur",
    },
  ],
  name: [
    {
      required: true,
      message: "项目名称不能为空",
      trigger: "blur",
    },
  ],
  content: [
    {
      required: true,
      message: "检测项目内容不能为空",
      trigger: "blur",
    },
  ],
};

// 数据规范, 表中没有需要规范格式的数据, 则不需要这一行.
const dataFormat = (
  columnName: string,
  cellValue: string,
  callback: (value: string) => void
) => {
  if (columnName === "createUser") {
    callback(cellValue);
  }
};

// 申明表单
const submitFormRef = ref();
const submitForm = ref({} as QualityTestItems);

const setFormInitValue = (formType: string, row: QualityTestItems) => {
  if (undefined !== submitFormRef.value) {
    submitFormRef.value.clearValidate();
  }
  switch (formType) {
    case "insert":
      submitForm.value = {
        name: "",
        no: "",
        content: "",
        remark: "",
        represent: "",
        createUser: sessionStorage.getItem("token") as string,
        createGmt: new Date(),
      } as QualityTestItems;
      break;
    case "update":
      submitForm.value = row;
      submitForm.value.modifiedUser = sessionStorage.getItem("token") as string;
      submitForm.value.modifiedGmt = new Date();
      break;
  }
};
/**
 * 提交数据前的校验
 * @param callback 回调函数,将校验结果返还到Table组件中.
 */
const submitValid = (callback: (value: boolean) => void) => {
  submitFormRef.value
    .validate()
    .then(() => {
      callback(true);
    })
    .catch(() => {
      callback(false);
    });
};
/**
 * 清空表单校验结果，防止在切换新增和编辑页面时以前的校验结果仍然保留
 */
const clearTableValidate = () => {
  console.log("test");
  // submitFormRef.value.clearValidate();
};

// const jsonList = ref();

const jsonFormat = (
  data: Record<string, unknown>[][],
  callback: (value: Record<string, unknown>[]) => void
) => {
  let jsonList: Record<string, unknown>[] = [];
  for (let i = 0; i < data[0].length; i++) {
    // 存入字段名和excel表中的名称的映射，记得修改
    jsonList[i] = {};
    jsonList[i].no = data[0][i]["test1"];
    jsonList[i].name = data[0][i]["test2"];
    jsonList[i].represent = data[0][i]["test3"];
    jsonList[i].departmentPhone = data[0][i]["test4"];
    jsonList[i].createUser = sessionStorage.getItem("token") as string;
    jsonList[i].createGmt = new Date();
  }
  callback(jsonList);
};
</script>

<style scoped></style>
